<template>
  <el-dialog v-model="dialogVisible" :title="htmlTitle" width="360px">

    <el-table ref="refTable" :data="tableData" style="width: 100%;" max-height="180" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" :label="htmlLabelName" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="showAddForm">{{ htmlBtnAdd }}</el-button>
        <el-button type="warning" @click="deleteChoose">{{ htmlBtnDeleteChoose }}</el-button>
        <el-button @click="dialogVisible = false">{{ htmlBtnCancel }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ htmlBtnConfirm }}</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible" width="360px">
    <el-form :model="form">
      <el-form-item :label="htmlLabelName" label-width="100px">
        <el-input v-model="form.name" style="width: 180px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ htmlBtnCancel }}</el-button>
        <el-button type="primary" @click="saveAdd">{{ htmlBtnConfirm }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import LunchService from "@/service/LunchService"

export default {
  name: 'LunchMenuManage',
  data() {
    return {
      dialogVisible: false,
      selectedMenus: [],
      tableData: [],

      dialogFormVisible: false,
      form: {
        name: ''
      },

      htmlTitle: chrome.i18n.getMessage('lunchContentMenuManageTitle'),
      htmlLabelName: chrome.i18n.getMessage('commonLabelName'),
      htmlBtnCancel: chrome.i18n.getMessage('commonBtnCancel'),
      htmlBtnConfirm: chrome.i18n.getMessage('commonBtnConfirm'),
      htmlBtnDeleteChoose: chrome.i18n.getMessage('commonBtnDeleteChoose'),
      htmlBtnAdd: chrome.i18n.getMessage('commonBtnAdd'),
    }
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },

  methods: {
    /**
     * 显示.
     */
    show() {
      this.tableData = this.data
      this.dialogVisible = true
    },
    /**
     * 选中菜单.
     * @param val
     */
    handleSelectionChange(val) {
      this.selectedMenus = val
    },
    /**
     * 确认操作.
     */
    handleConfirm() {
      if (this.tableData.length < 1) {
        this.$message.warning(chrome.i18n.getMessage('lunchContentSysMenuConfirmAlert'))
        return
      }
      this.$emit('confirm', this.tableData)
      this.dialogVisible = false
    },
    /**
     * 删除选中菜单.
     */
    deleteChoose() {
      if (this.selectedMenus.length < 1) {
        this.$message.warning(chrome.i18n.getMessage('lunchContentSysMenuConfirmAlert'))
        return
      }
      let arrChoose = {}
      this.selectedMenus.forEach(item => {
        arrChoose[item.name] = true
      })
      let arrMenu = []
      this.tableData.forEach(item => {
        if (!arrChoose[item.name]) {
          arrMenu.push(item)
        }
      })
      this.tableData = arrMenu
    },
    /**
     * 显示添加菜单表单.
     */
    showAddForm() {
      this.form.name = ''
      this.dialogFormVisible = true
    },
    /**
     * 保存添加菜单.
     */
    saveAdd() {
      this.tableData.push({
        name: this.form.name
      })
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>

</style>